import React from "react"


//生命周期

// 所谓的生命周期就是一系列的钩子函数(用于表示React组件一些重要时刻)

//react的生命周期分为三个阶段:装载阶段(3)、更新阶段(2)、卸载阶段(1)

//装载阶段(3):constructor/render/componentDidMount
//更新阶段(2):[shouldComponentUpdate]/render/componentDidUpdate
//卸载阶段(1):componentWillUnmount
export default class TestLife extends React.Component{
    /*
        生命周期的第一阶段:装载阶段(3)=========
    */


    //constructor()，这个构造器接受一个props
    //props表示父组件传递过来的信息数据、路由信息、状态管理信息。
    //props相当于是父子关系中的纽带、基因：props不能修改，修改就报错

    //state声明式变量，必须定义在constructor中，使用this.state来定义
    //特别注意:props和state不要交叉赋值，react不推荐把props和state进行交叉赋值，这会导致乱七八糟的bug。
    //在constructor中也不能使用this.setState().
    //在constructor中可以做一些初始化的数据工作，但不建议在这调接口
    //这是React类组件的构造器函数
    constructor(props){
        // super(props)调用父类(React.Component)的构造器函数，用于继承Component类的特性
        //必须是第一行代码
        super(props)
        console.log('----constructor---');
    }
    /*
        componentDidMount()
        相当于vue中的mounted()，表示DOM视图已经渲染完成，在这里可以调接口，进行DOM操作、开定时器

        在这里可以使用this.setState()
    */

    componentDidMount(){
        console.log('---componentDidMount----');
    }
    /*
        生命周期的第二阶段:更新阶段(3)=========
    */
    /*
        shouldComponentUpdate()
        它是一个控制react更新的‘开关’，它必须有返回值，这个生命周期必须要有返回值，并且返回值要是布尔值

        如果返回值是false,则更新阶段不会运行
        如果返回值是true,则更新阶段会运行(生成新jsx，diff运算、更新视图)

        这个生命周期，在工作中很少用。但是面试官爱问这个生命周期

        这个生命周期、有什么用？用于精细化地控制是否执行更新，以达到性能优化的目的
    */


    shouldComponentUpdate(newProps,newState){
        console.log('----shouldComponentUpdate-----');

        //拦截掉那些“不用于视图更新”的State变量
        //如果发现那些与视图更新无关的state变量发生变化，我要返回false
    }

    /*
        componentDidUpdate()
        相当于vue中的updated(),表示DOM更新已经完成
        在这里可以使用this.setState()，但必须要有终止条件，避免死循环

        工作中最好别再这个生命周期中使用this.setState()
        在这里可以做DOM操作，但是不建议
    */
    componentDidUpdate(){
        console.log('-----componentDidUpdate----');
    }


    /*
        生命周期的第三阶段:卸载阶段(3)=========
    */

    /*
        componentWillUnmount()
        相当于vue的beforeDestroy()
        通常在这关闭定时器、关闭长连接、销毁占内存的变量，这里不能使用this.setState(),在这里也不要做DOM操作
    */
    componentWillUnmount(){
        console.log('---componentWillUnmount----');
    }


    //render()
    //这是react类组件唯一的一个必须要有的钩子
    //render()函数一定要有return语句
    //render()它的返回值可以是null,或者是jsx元素。
    //在render()内部、return之前，可以写任何业务逻辑，但是不建议做与DOM操作有关的事
    //在render()中不能使用this.setState()，因为this.setState()会触发render()方法，这将是一个死循环
    //特别警告:在那些用于生成jsx的渲染函数中,也不能使用this.setState()
    render(){
        console.log('---render---');
        return(
            <div>
                <h1>学习生命周期</h1>
            </div>
        )
    }
}